<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>


<div style="text-align: center;" id="app">
    <div style="height:100px;width:100%;background-color:#00b7ea">
        <div style="height: 80px; width:70%;margin:auto;padding-top:10px">
            <h1 style="color: #ffffff;">541导航</h1>
            <ul id="nav">
                <li><button>工商银行</button></li>
                <li><button>农业银行</button></li>
                <li><button>建设银行</button></li>
                <li><button>中国银行</button></li>
                <li><button>招商银行</button></li>
                <li><button>邮政银行</button></li>
                <li><button>民生银行</button></li>
                <div style="display:inline-block" v-if='!isLoggedIn'>
                    <li><a @click="dialogVisible = true;activeName='login'">登录</a></li>
                    <li><a @click="dialogVisible = true;activeName='register'">注册</a></li>
                </div>

                <div style="display:inline-block;margin-left:100px" v-else>
                    <!-- <el-button style="background-color:#00b7ea;border:none" type="primary" icon="el-icon-user-solid">会员中心</el-button> -->
                    <el-dropdown>
                        <span class="el-dropdown-link" style="color:#ffffff">
                            <i class="el-icon-user-solid" style="margin-right: 10px;"></i>会员中心
                        </span>
                        <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item @click.native='exit()'>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                </div>
                
            </ul>
        </div>
    </div>

    <div style="margin-top:300px">
        <input type="text" id="content" style="height: 50px;width:500px;">
        <button style="height: 50px;width: 140px;border:none;background-color:#00b7ea;color:#ffffff" onclick="search()">搜索一下</button>
    </div>

    <!-- 登录注册的悬浮框 -->
    <el-dialog
        :visible.sync="dialogVisible"
        width="400px"
        :before-close="handleClose" :show-close=false>

        <el-tabs v-model="activeName">
            <!-- 登录页面 -->
            <el-tab-pane label="登录" name="login">
                <p style="text-align: left;">欢迎来到541导航网!</p> 
                <el-form style="margin-top:20px" :model="login" status-icon  ref="ruleForm" label-width="40px" class="demo-ruleForm" id="login">
                <el-form-item label="帐号" prop="user">
                    <el-input type="text" v-model="login.user" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="login.pass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="getlogin()">登录</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>

            <!-- 注册页面 -->
            <el-tab-pane label="注册" name="register">
                <p style="text-align: left;">创建您的541导航网帐户!</p> 
                <el-form style="margin-top:20px" :model="register" status-icon  ref="ruleForm" label-width="70px" class="demo-ruleForm" id="login">
                <el-form-item label="帐号" prop="user">
                    <el-input type="text" v-model="register.user" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="密码" prop="pass">
                    <el-input type="password" v-model="register.pass" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="确认密码" prop="passs">
                    <el-input type="password" v-model="register.passs" autocomplete="off"></el-input>
                </el-form-item>

                <el-form-item label="邮箱帐号" prop="email">
                    <el-input type="email" v-model="register.email" autocomplete="off"></el-input>
                    <p style="color:red;font-size:12px">请务必填写真实邮箱，方便急换网址时候通知您！</p>
                </el-form-item>


                <el-form-item>
                    <el-button type="primary" @click='getregister()'>注册</el-button>
                    <el-button @click="dialogVisible=false">取消</el-button>
                </el-form-item>
                </el-form>
            </el-tab-pane>
            </el-tab-pane>
        </el-tabs>

    </el-dialog>

</div>

<script>
    let app = new Vue({
        el: '#app',
        data: {
            dialogVisible: false,
            activeName: 'login',
            login:{
                user:'',
                pass:'',
            },
            register:{
                user:'',
                pass:'',
                passs:'',
                email:'', 
            },
            //是否登录
            isLoggedIn:false,
        },
        methods: {
            handleClose() {
                this.dialogVisible = false;
            },
            //登录验证
            getlogin(){
                //开始验证帐号
                if(this.login.user == '' || this.login.pass == ''){
                    this.$message({
                    message: '帐号或密码不允许为空',
                    type: 'warning'
                    });
                    return;
                }
                //调用后端接口
                $.post('/api/login',{
                    user:this.login.user,
                    pwd:this.login.pass
                },res=>{
                    if(res.code==200){
                        this.$message({
                        message: '登录成功',
                        type: 'success'
                        });
                        this.handleClose();
                        this.isLoggedIn = true;
                        localStorage.status=true;
                    }else{
                        this.$message.error('登录失败，请检查帐号或密码是否正确');
                    }
                });


            },
            //登录验证
            getregister(){
                if(this.register.user == '' || this.register.pass == '' || this.register.passs == '' || this.register.email == ''){
                    this.$message({
                    message: '输入框不允许留空，请输入',
                    type: 'warning'
                    });
                    return;
                }
                if(this.register.pass != this.register.passs){
                    this.$message({
                    message: '两次密码不相同请重新输入',
                    type: 'warning'
                    });
                    this.register.passs='';
                    return;
                }

                //执行注册
                $.post('/api/register',{
                    user:this.register.user,
                    pwd:this.register.pass,
                    email:this.register.email
                },res=>{
                    console.log(res);
                    if(res.code==200){
                        this.$message({
                        message: '注册成功',
                        type: 'success'
                        });
                        this.handleClose();
                    }else if(res.code==-2){
                        this.$message.error('帐号已注册，请登录');
                    }
                });


            },
            //判断是否已经登录
            ifLogin(){
                if(localStorage.status!=undefined && localStorage.status=='true'){
                    this.handleClose();
                    this.isLoggedIn = true;
                    //进行申请登录
                    $.post('/api/login',res=>{
                        if(res.code!=200){
                            this.isLoggedIn = false;
                            localStorage.status=false;
                        }
                    });
                }   
            },
            //退出帐号
            exit(){
                localStorage.status=false;
                this.isLoggedIn=false
            }

        },
        created(){
            //判断是否已经登录
            this.ifLogin();

        }
    })

    function search(){
        let con = $('#content').val();
        if(con==''){
            alert('搜索框不可为空');
            return;
        }
        $.post('/api/search',{
            content:con
        },data=>{
            if(data.code==200){
                //获取道数据
                window.location.replace("/search/"+data.data);
            }else{
                //跳转百度
                window.location.href = "https://www.baidu.com/s?ie=UTF-8&wd="+con;
            }
        });
    }

</script>

<style>
*{
    margin: 0;
    padding: 0;
}

#nav li{
    display:inline-block;
    height: 30px;
    width: 100px;
}
#nav li button{
    background-color:#00b7ea;
    border:none;
    color:#ffffff;
}

#app > div.el-dialog__wrapper > div{
    border-radius: 10px;
}

#app > div.el-dialog__wrapper > div > div.el-dialog__body{
    padding:0 20px;
}

#app > div.el-dialog__wrapper > div > div.el-dialog__body > div > div.el-tabs__header.is-top > div > div{
    /* text-align: center; */
}
#tab-login,#tab-register{
    width: 150%;
    font-size: 16px;
}


</style>